<template>
  <div class="detail" ref="detail">
    <detail-header ref="header"></detail-header>
    <div class="scroll-wrapper" ref="wrapper">
      <div>
        <detail-banner :info="info"></detail-banner>
        <detail-ticket :info="categoryList" class="ha"></detail-ticket>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import detailBanner from './banner'
import detailTicket from './ticket'
import detailHeader from './header'
import Bscroll from 'better-scroll'
export default {
  name: 'detail',
  components: {
    detailBanner,
    detailTicket,
    detailHeader
  },
  created () {
    this.getInfo()
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new Bscroll(this.$refs.wrapper, { click: true })
    })
  },
  activated () { // 监听滚动事件
    if (this.lastId !== this.$route.params.id) { // 根据id判断是否需要重新渲染页面
      this.getInfo()
      this.lastId = this.$route.params.id
    }
  },
  data () {
    return {
      info: {},
      categoryList: [],
      lastId: 0
    }
  },
  methods: {
    getInfo () { // 获取详情页数据的数据并且传递给子组件
      return axios.get(`/api/static/mock/detail.json?id='${this.$route.params.id}`, { timeout: 10000 })
        .then(res => {
          if (res.data.data) {
            this.info = res.data.data
            this.categoryList = res.data.data.categoryList
          }
        })
    },
    handleScroll () { // 根据滚动的距离决定头部是否显示
      let distance = this.$refs.detail.scrollTop
      if (distance > 100) {
        this.$refs.header.show()
      } else {
        this.$refs.header.hide()
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.detail
  overflow scroll
  height 100%
  .ha
    height 2000px
</style>
